<template>
  <div class="switch-container">
    <div class="wrap">
      <div
        v-for="(item,index) of options"
        :key="index"
        :class="checked === item.value ? 'active btn' : 'btn'"
        @click="onChange(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SwitchButton',
  props: {
    options: {
      type: Array,
      default: () => ({})
    },
    checked: {
      type: String,
      default: () => {
      }
    },
    onChange: {
      type: Function,
      default: () => {
      }
    }
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="scss" scoped>
	.switch-container {
		width: 100%;
		padding: 0 0.28rem;
		box-sizing: border-box;

		.wrap {
			display: flex;
		}

		.btn {
			border: 1px solid #2090E7;
			padding: 0.1rem 0;
			background-color: #ffffff;
			font-size: 0.3rem;
			color: #2090E7;
			flex-grow: 1;
			text-align: center;
		}

		.btn.active {
			background: #2090E7;
			color: #fff;
		}

	}
</style>
